<template>
    <div>
        
        <card-component class="cards" v-for="item in form" :datas="item"></card-component>
        
        <el-button type="primary" plain class="release-button" @click="show = !show">发布</el-button>
        <transition name="el-zoom-in-top">
            <div v-show="show" class="transition-box"><form-component @setShow="setShow"></form-component></div>
        </transition>
    </div>
</template>

<script>
import CardComponent from "@/components/CardComponent.vue";
import FormComponent from "@/components/FormComponent.vue";
import { getAllBlogService } from '@/api/blog'
export default {
    name: "DiscussView",
    components: { FormComponent, CardComponent },
    data() {
        return {
            show: false,
            form: []
        }
    },
    async mounted() {
        // this.activeIndex = '/' + this.$route.name;
        let result = await getAllBlogService()
        this.form = result.data
        console.log(this.form)
    },
    methods: {
        setShow() {
            this.show = false
        }
    }
}
</script>

<style scoped>
.cards {
    margin-top: 10px;
}

.release-button {
    position: fixed;
    top: 100px;
    left: 46.87%;
    z-index: 1;
}

.transition-box {
    width: 40%;
    position: fixed;
    right: 1px;
    overflow: scroll;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    text-align: center;
    top: 62px;
    height: 90%;
    padding-top: 30px;
    padding-right: 50px;
    z-index: 2;
    background-color: white;
}
</style>